<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>部门信息</span>
        <el-select v-model="tempData.deparement" placeholder="请选择单位分类" class="userselect">
          <el-option
            v-for="item in ifydata"
            :key="item.id"
            :label="item.departments"
            :value="item.departments"
          ></el-option>
        </el-select>
      </p>
			<p>
			  <span>提交人</span>
			  <el-input v-model="tempData.persons" type="text" disabled class="userselect"/>
			</p>
      <p>
        <span>备注信息</span>
        <el-input v-model="tempData.remartks" type="text" placeholder="请输入备注信息" class="userselect" />
      </p>
      <p>
        <span>标题</span>
        <el-input v-model="tempData.titles" type="text" placeholder="请输入标题" class="userselect" />
      </p>
			<p>
			  <span>上传资料</span>
			  <el-upload
			    class="upload-demo userselect"
			    drag
					:show-file-list="false"
			    :http-request="designUpFile"
			    action=""
					:multiple='false'
			    >
			    <i class="el-icon-upload"></i>
			    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  </el-upload>
				<strong>{{tempData.parentFile}}</strong>
			</p>
    </div>
		<div class="submits">
		  <div class="save" @click="save">保存</div>
		  <div class="nosave" @click="nosave">取消</div>
		</div>
		<!-- 采购员弹窗 -->
  </div>
</template>

<script>
	import { getUser,getBumen,addPeople,uploadFile } from '@/api/people'
	import { updateDetail,addDetail } from '@/api/keyprojects'
	let fatherid = null
	export default {
		data(){
			return{
				tempData: {},
				peopleData: [],
				ifydata: [{
				  id: 0,
				  departments: '全部',
				  value: ''
				}],   //部门列表
				writeOradd: 0,   //1修改还是0增加
				buyerShow: false
			}
		},
		mounted() {
			// this.getpeople()
			this.bumenList()
			if(this.$route.params.options) {
				this.tempData = JSON.parse(this.$route.params.options)
				this.writeOradd = 1
			} else {
				this.writeOradd = 0
				this.tempData.persons = this.$store.state.user.userInfo[0].username
				console.log(this.tempData.persons)
			}
			fatherid = this.$route.params.fatherId
			console.log(this.tempData)
		},
		methods:{
			save(){
				this.tempData.persons = this.$store.state.user.userInfo[0].username
				if(this.writeOradd == 0) {
					// this.tempData.departFacilityId = fatherid
					addDetail(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
					})
				} else {
					updateDetail(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
					})
				}
				this.$router.go(-1)
			},
			// 选择人员分类
			handleSelece(index){
				console.log(index)
				console.log('ifydata:',this.ifydata[index])
				const navindex = this.ifydata[index].value ? this.ifydata[index].value : null
				this.getpeople(navindex)
			},
			// 选择操作人员
			handlePeople(row){
			  console.log(row)
			  this.tempData.persons = row.username
			  console.log(this.tempData.persons)
				this.buyerShow = false
			},
			checkBuyer() {
			  this.buyerShow = true;
			},
			getpeople(id){
			  console.log('id:',id)
			  getUser({departments: id}).then(res => {
			    console.log(res)
			    this.peopleData = res.data.list
			  })
			},
			designUpFile(item) {
				console.log(this.fileNum)
			  var formData = new FormData()
			  formData.append("file", item.file)
			  uploadFile(formData).then(res => {
			    console.log(res)
					this.tempData.parentFile = res
					this.$forceUpdate()
			    addPeople({fileName: res}).then(res => {
			      console.log(res)
			      this.$message({
			        showClose: true,
			        message: '添加成功',
			        type: "success"
			      })
			    })
			  })
			},
			nosave(){
				this.$router.go(-1)
			},
			bumenList(){
			  getBumen({}).then(res => {
			    console.log(res)
			    res.data.map(item => {
						item.value = item.departments
						return item
					})
					this.ifydata = [this.ifydata[0],...res.data]
			  })
			},
			// 上传头像
			designUpAvatar(item){
				console.log(this.fileNum)
				var formData = new FormData()
				formData.append("file", item.file)
				uploadFile(formData).then(res => {
				  console.log(res)
					this.$message({
					  showClose: true,
					  message: '添加成功',
					  type: "success"
					})
					this.imageUrl = res
					this.tempData.imgurl = res
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
			flex-wrap: wrap;
	    align-items: center;
			position: relative;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
			/deep/.el-upload-dragger {
				width: 100%;
			  height: 100px;
			}
			/deep/.el-upload-dragger .el-icon-upload {
			  font-size: 60px;
			  color: #C0C4CC;
			  margin: 0; 
			  line-height: 1;
				width: 100%;
			}
			/deep/.el-upload {
				width: 100%;
			}
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
			>strong{
				display: inline-block;
				// position: absolute;
				// left: 0;
				// bottom: 0;
				padding-left: 100px;
				// width: 100%;
				font-weight: 100;
				font-size: 14px;
			}
	  }
		
	}
	/deep/.el-upload-dragger {
  width: auto;
}
	.avatar-uploader .el-upload {
	  border: 1px dashed #999 !important;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  text-align: center;
	}
	.avatar {
	  width: 100px;
	  height: 100px;
	  display: block;
	}
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
	.files {
	  display: flex;
	  background: #fff;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  border-radius: 8px;
	  margin-top: 20px;
	  overflow: hidden;
	  padding: 20px;
	}
	.files-btm .btn-prev:after {
	  content: "上一页";
	}
	.files-btm .btn-next:before {
	  content: "下一页";
	}
	.files-btm .btn-prev,
	.files-btm .btn-next {
	  width: 65px;
	}
	.files-left {
		width: 160px;
		margin-right: 20px;
		/deep/.el-menu{
			border-right: none;
		}
		/deep/.el-menu-item{
			height: 35px;
			line-height: 35px;
			margin-bottom: 8px;
		}
		/deep/.el-menu-item.is-active{
			color: #fff;
			border-radius: 5px;
			background: rgba(24,160,94,.8);
		}
	}
	.files-right {
	  flex: 1;
	  overflow: hidden;
	}
	.files-btm {
	  background: rgba(255, 255, 255, 1);
	  border-radius: 8px;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  // margin-top: 20px;
	  overflow: hidden;
	  &-title {
	    display: flex;
	    align-items: center;
	    height: 45px;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	    background: #ffffff;
	    > p {
	      text-align: center;
	      font-size: 16px;
	      color: #333;
	    }
	  }
	  .addDate {
	    margin: 20px 32px 10px 32px;
	    height: 32px;
	    border-radius: 3px;
	    text-align: center;
	    line-height: 32px;
	    font-size: 14px;
	    color: #333;
	    cursor: pointer;
	    border: 1px dashed rgba(0, 0, 0, 0.3);
	  }
	  .el-button--text {
	    margin: 0 15px;
	  }
	}
	.avatar{
		width: 30px;
		height: 30px;
	}
</style>